<template>
	<view class="index-list animate__animated animate__slideInLeft animate__faster">
		<view class="box-list1 m-f-jsb">
			<view class="box-list1-left m-f-ac">
				<image class="left-img" :src="item.userpic" mode="aspectFill" lazy-load></image>
				<text class="left-text">{{item.username}}</text>
			</view>
			<view class="box-list1-right m-f-ac">
				<view class="add-btn m-f-ac" v-show="!item.isguanzhu" @click="guanzhu">
					<view class="icon iconfont icon-jiahao"></view>
					<text>关注</text>
				</view>
			</view>
		</view>
		<view class="box-list2" @click="openDatail">{{item.title}}</view>
		<view class="box-list3 m-f-jcc">
			<!-- 图片 -->
			<image class="list3-img" :src="item.titlepic" mode="widthFix" lazy-load @click="openDatail"></image>
			<!-- 视频 -->
			<template v-if="item.type==='video'">
				<view class="video-play">
					<text class="icon iconfont icon-bofang"></text>
				</view>
				<view class="video-text">
					<text>{{item.playnum}}次播放 {{item.long}}</text>
				</view>
			</template>
		</view>
		<view class="box-list4 m-f-jsb">
			<view class="box-list4-left">
				<view :class="{'active': item.infonum.index === 1}" @click="caozuo('ding', index)" class="list4-view">
					<text class="icon iconfont icon-xiaolian list4-text"></text>
					<text class="list4-text">{{item.infonum.dingnum}}</text>
				</view>
				<view :class="{'active': item.infonum.index === 2}" @click="caozuo('cai', index)" class="list4-view">
					<text class="icon iconfont icon-kulian list4-text"></text>
					<text class="list4-text">{{item.infonum.cainum}}</text>
				</view>
			</view>
			<view class="box-list4-right">
				<view class="list4-view">
					<text class="icon iconfont icon-pinglun list4-text"></text>
					<text class="list4-text">{{item.commentnum}}</text>
				</view>
				<view class="list4-view">
					<text class="icon iconfont icon-zhuanfa list4-text"></text>
					<text class="list4-text">{{item.sharenum}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			item: {
				type: Object
			},
			index: {
				type: Number
			}
		},
		methods: {
			async guanzhu() { // 关注
				try{
					let [err, res] = await this.$http.post('/follow', {
						follow_id: this.item.userid
					}, {
						token: true,
						checkToken: true,
						checkAuth: true
					})
					console.log(res)
					// 错误处理
					if (!this.$http.errorCheck(err, res)) {
						return
					}
					// 关注成功
					uni.showToast({ title: '关注成功' })
					// 通知首页修改状态
					let resdata = {
						type: 'guanzhu',
						userid: this.item.userid,
						data: true
					}
					// 通知父组件
					this.$emit('changeevent', resdata)
					// 通知首页
					uni.$emit('updateData', resdata)
				}catch(e){
					return
				}
			},
			async caozuo(type) { // 顶踩
				try{
					let index = (type === 'ding') ? 1 : 2 // 操作后的状态
					if (this.item.infonum.index === index) return // 状态相同不修改
					let [err, res] = await this.$http.post('/support', {
						post_id: this.item.id,
						type: index - 1
					}, {
						token: true,
						checkToken: true,
						checkAuth: true
					})
					// 错误处理
					if (!this.$http.errorCheck(err, res)) return
					uni.showToast({
						title: index == 1 ? '顶成功' : '踩成功'
					})
					let resdata = {
						type: 'support',
						post_id: this.item.id,
						do: type
					}
					// 通知父组件
					this.$emit('changeevent', resdata)
					// 通知全局
					uni.$emit('updateData', resdata)
				}catch(e){ return }
			},
			openDatail() { // 进入详情页
				uni.navigateTo({
					url: '../../pages/detail/detail?detailData=' + JSON.stringify(this.item),
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.index-list {
		border-bottom: 1rpx solid #efefef;
		padding: 20rpx;
		.box-list1 {
			.box-list1-left {
				.left-img {
					width: 60rpx;
					height: 60rpx;
					border-radius: 50%;
					margin-right: 15rpx;
				}
				.left-text {
					color: #B2B2B2;
				}
			}
			.box-list1-right {
				.add-btn {
					background-color: #F4F4F4;
					padding: 1rpx 15rpx;
					border-radius: 4rpx;
					color: #8b8989;
					.icon-jiahao {
						margin-right: 6rpx;
					}
					margin: 10rpx;
				}
				.cha-color {
					color: #BFBCBC;
				}
			}
		}
		.box-list2 {
			font-size: 32rpx;
			padding: 12rpx 0;
		}
		.box-list3 {
			padding: 15rpx 0;
			position: relative;
			.list3-img {
				width: 100%;
				border-radius: 15rpx;
			}
			.video-play {
				position: absolute;
				color: #FFFFFF;
				.icon-bofang {
					font-size: 160upx;
				}
			}
			.video-text {
				position: absolute;
				background-color: rgba(51, 51, 51, 0.72);
				color: #FFF;
				bottom: 24rpx;
				right: 8rpx;
				border-radius: 40rpx;
				padding: 0 15rpx;
				font-size: 22rpx;
			}
		}
		.box-list4 {
			color: #BFBCBC;
			.box-list4-left, .box-list4-right {
				display: flex;
				.list4-view {
					margin-right: 15rpx;
					.list4-text {
						margin-right: 10rpx;
					}
				}
			}
			.active {
				color: #FEE42A;
			}
		}
	}
</style>
